<!--布局组件-->
<template>
  <div id="layout">
    <t-layout key="side" class="mainLayoutCls">
      <t-aside :style="{ width: asideWidth }">
        <layout-side-nav @collapse="handleCollapse" />
      </t-aside>
      <t-layout >
        <t-header>
          <layout-header />
        </t-header>
        <t-content>
          <layout-content />
        </t-content>
      </t-layout>
    </t-layout>
  </div>
</template>

<script setup>
import LayoutSideNav from "@/layouts/components/LayoutSideNav.vue";
import LayoutHeader from "@/layouts/components/LayoutHeader.vue";
import LayoutContent from "@/layouts/components/LayoutContent.vue";
import {ref} from "vue";
const asideWidth = ref('232px'); // 默认宽度

const handleCollapse = (collapsed) => {
  asideWidth.value = collapsed ? '64px' : '232px'; // 根据折叠状态设置宽度
};

</script>

<style lang="less" scoped>
@import "@/styles/layout.less";
</style>